<template>
  <div :class="['house-list']">
    <SearchHeader/>
    <screen @isHi="isHi" @ok="ok"/>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :offset="400"
      @load="onLoad"
    >
      <HouseItem v-for="(item,index) in list" :key="index" :item="item"/>
    </van-list>
  </div>
</template>

<script>
import SearchHeader from "../../components/SearchHeader";
import HouseItem from "../../components/HouseItem";
import screen from "./compoments/screen.vue";
import { request, getCity } from "../../utils/index.js";
export default {
  components: {
    SearchHeader,
    screen,
    HouseItem
  },
  data() {
    return {
      isHidden: false,
      list: [],
      loading: false,
      finished: false,
      query: {
        end: 20,
        start: 1,
        cityId: null
      },
      count: 0,
      asign: 1
    };
  },
  methods: {
    async ok(query) {
      if (this.asign === 1 && this.loading === true)
        return this.$toast("加载中");
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
        overlay: true
      });
      this.query.start = 1;
      this.query.end = 20;
      this.loading = true;
      this.query = { ...this.query, ...query };
      const res = await request.get("houses", {
        params: this.query
      });
      this.list = res.data.body.list;
      this.count = res.data.body.count;
      this.query.start = this.query.start + 20;
      this.query.end = this.query.end + 20;
      this.loading = false;
      this.$toast.clear();
      window.scrollTo(0, 0);
      this.$toast(`共有${this.count}条数据`);
    },
    async onLoad() {
      const res = await request.get("houses", {
        params: this.query
      });
      console.log(res.data.body.list);
      // 加载状态结束
      this.loading = false;
      this.count = res.data.body.count;
      this.query.start = this.query.start + 20;
      this.query.end = this.query.end + 20;
      this.list = [...this.list, ...res.data.body.list];
      if (this.asign === 1) this.$toast(`共有${this.count}条数据`);
      this.asign++;
      // 数据全部加载完成
      if (this.list.length >= this.count) this.finished = true;
    },

    isHi(value) {
      this.isHidden = value;
    }
  },
  async created() {
    const res = await getCity();
    this.query.cityId = res.value;
  },
  watch: {
    isHidden() {
      const body = document.querySelector("body");
      if (this.isHidden) {
        body.className = "abc";
      } else {
        body.className = "";
      }
    }
  }
};
</script>
<style lang="less" scoped>
.house-list {
  padding-top: 15px;
  padding-bottom: 70px;
}
.van-list {
  padding-bottom: 50px;
}
</style>

